<template>
  <div>
    <!-- <div class="ballWrap">
      <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @afterEnter="afterEnter"
      >
        <div class="ball" v-if="ball.show">
          <li class="inner">
            <span class="cubeic-add" @click="addToCart($event, item)">
              <svg-icon class="add-icon" icon-class="add"></svg-icon>
            </span>
          </li>
        </div>
      </transition>
    </div> -->

    <van-tabbar
      route
      v-model="active"
      @change="tabChange(active)"
      active-color="#FE4F70"
      inactive-color="#949497"
      style="z-index: 100"
    >
      <van-tabbar-item name="home" icon="home-o" to="/home">
        首页
      </van-tabbar-item>
      <van-tabbar-item name="classify" icon="apps-o" to="/classify">
        分类
      </van-tabbar-item>
      <van-tabbar-item
        name="shopCart"
        icon="shopping-cart-o"
        to="/shopCart"
        :badge="count"
      >
        购物车
      </van-tabbar-item>
      <van-tabbar-item name="mine" icon="user-o" to="/mine">
        我
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { ref, getCurrentInstance, computed, reactive } from "vue";
import { useStore } from "vuex";

export default {
  setup() {
    const { ctx } = getCurrentInstance();
    const store = useStore();
    const active = ref(0);

    const ball = reactive({
      show: true,
      el: "",
    });
    const beforeEnter = (el) => {
      const dom = ball.el;
      const rect = dom.getBoundingClientRect();
      const x = rect.left - window.innerWidth * 0.6;
      const y = -(window.innerHeight - rect.top);
      el.style.display = "block";
      el.style.transform = `translate3d(0,${y}px,0)`;
      const inner = el.querySelector(".inner");
      inner.style.transform = `translate3d(${x}px,0,0)`;
    };

    const enter = (el, done) => {
      document.body.offsetHeight;
      el.style.transform = "translate3d(0,0,0)";
      const inner = el.querySelector(".inner");
      inner.style.transform = "translate3d(0,0,0)";
      el.addEventListener("transitionend", done);
    };

    const afterEnter = (el) => {
      ball.show = false;
      el.style.display = "none";
    };
    function addToCart(event, tag) {
      // console.log(event, tag);
      store.commit("addToCart", tag);
      ball.show = true;
      ball.el = event.target;
    }
    const count = computed(() => {
      return store.state.count;
    });
    return {
      active,
      beforeEnter,
      enter,
      afterEnter,
      ball,
      count,
    };
  },
  methods: {
    tabChange(active) {
      console.log("==active=====>", active);
    },
  },
};
</script>
<style lang="scss" scoped></style>
